// 左边的效果

class FA{
    constructor(yy,fenlei,jiahao){
        this.oYy=yy;
        this.oFenlei=fenlei;
        this.oJiahao=jiahao;
        this.click();
    }

    click(){
        let that=this;
        for(let i=0;i<oYy.length;i++){
        this.oYy[i].onclick=function(){
                if(oJiahao[i].innerHTML=="+"){
                    that.oFenlei[i].style.display="flex";
                    // that.oFenlei.style.transitionAll ="3s";
                    oJiahao[i].innerHTML="-";
                }else if(oJiahao[i].innerHTML=="-"){
                    that.oFenlei[i].style.display="none";
                    oJiahao[i].innerHTML="+"
                }
                    
                
        }
       }
      
    }
}


// 右边的效果
var oLis=document.querySelectorAll(".lis");
// console.log(oLis);
// var oBigbox=document.querySelector(".bigbox");
var oSmall11=document.querySelector(".small11");
var oSmall12=document.querySelector(".small12");
var oSmall13=document.querySelector(".small13");
var oSmall14=document.querySelector(".small14");

for (i = 0; i < oLis.length; i++) {
    oLis[i].index=i;
    oLis[i].onclick=function(){
        // console.log(111);
        for(var j=0;j<oLis.length;j++){
            if(this.index==j){
                oLis[j].style.backgroundColor = "black";
                oLis[j].style.color = "white";
            }else{
                oLis[j].style.backgroundColor = "white";
                oLis[j].style.color = "black";
            }
        }
        

        switch (this.index) {
            case 0:
                oSmall11.style.display = "flex";
                oSmall12.style.display = "none";
                oSmall13.style.display = "none";
                oSmall14.style.display = "none";
              break;
            case 1:
              oSmall12.style.display = "flex";
              oSmall11.style.display = "none";
              oSmall13.style.display = "none";
              oSmall14.style.display = "none";
              break;
            case 2:
                oSmall13.style.display = "flex";
                oSmall11.style.display = "none";
                oSmall12.style.display = "none";
                oSmall14.style.display = "none";
              break;
            case 3:
                oSmall14.style.display = "flex";
                oSmall11.style.display = "none";
                oSmall12.style.display = "none";
                oSmall13.style.display = "none";
              break;
          }
    }
}

// 左边的效果接口
let xhr = new XMLHttpRequest();
xhr.open("get", "../../getGoodsType.php", true);
xhr.send();
xhr.onreadystatechange = function () {
 if (xhr.status == 200 && xhr.readyState == 4) {
    fun(xhr.responseText);
  }
}
let oType1=document.getElementsByClassName("type1");
console.log(oType1);
function fun(text){
    console.log(text);
    let json=JSON.parse(text);
    console.log(json);
    for(let i=0;i<oType1.length;i++){
        oType1[i].innerHTML = `${json[i].goodsType}`;
    }

}


// 右边的效果接口
let xhr2=new XMLHttpRequest();
xhr2.open("get", "../../getGoodsList.php", true);
xhr2.send();
xhr2.onreadystatechange = function () {
 if (xhr2.status == 200 && xhr2.readyState == 4) {
    funn(xhr2.responseText);
  }
}

// let oSmall11=document.getElementsByClassName("small11")[0];
console.log(oSmall11);
let children=oSmall11.children;
console.log(children);
function funn(test){
    console.log(test);
    let json2=JSON.parse(test);
    for(let i=0;i<children.length;i++){
        children[i].innerHTML=`
        <a href=""><img src="${json2[i].goodsImg}" alt="" /></a>
          <a href="">
            <p>${json2[i].goodsName}</p>
          </a>
          <s>￥${json2[i].goodsPrice}</s><br />
          <span>￥${json2[i].goodsDesc}</span>
        `;
    }
}


